<template>
	<view class="header">
		<view class="image-area">
			<image :src="curGoods.imgUrl"></image>
		</view>
		<view class="title-area">
			<text>{{curGoods.name}}</text>
		</view>
		<view class="price-area">
			<text>{{tempPrice}}元</text>
		</view>

	</view>

	<view class="content">
		<view style="padding-left: 40rpx;">规格:</view>
		<view class="btn-area">
			<button @click="doSelect('L')" :class="{ active: curGuiGe==='L'}">大</button>
			<button @click="doSelect('M')" :class="{ active: curGuiGe==='M'}">中</button>
			<button @click="doSelect('S')" :class="{active: curGuiGe==='S'}">小</button>
		</view>
		<view style="padding-left: 40rpx;">温度:</view>
		<view class="btn-area">
			<button>加冰</button>
			<button>常温</button>
		</view>
	</view>
	<view style="margin-top: 40rpx;">
		<uni-goods-nav @buttonClick="onClick" />
	</view>

</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';

	//获取参数
	onLoad((options) => {
		query(options.id)

	})

	//当前对象
	const curGoods = ref({})

	//查询根据 编号查询
	const query = (id) => {
		uni.request({
			url: `http://localhost:3000/goods/${id}`,
			success: (res) => {
				curGoods.value = res.data;
				tempPrice.value = res.data.price;
			}
		});



	}



	//临时价格
	const tempPrice = ref('0');

	//中杯
	const curGuiGe = ref('M')
	//选中
	const doSelect = (g) => {
		curGuiGe.value = g;
		switch (g) {
			case "L":
				tempPrice.value = Number.parseFloat(curGoods.value.price) + 5;
				break;
			case "M":
				tempPrice.value = curGoods.value.price;
				break;
			case "S":
				tempPrice.value = Number.parseFloat(curGoods.value.price) - 5;
				break;
			default:

		}

	}


	const onClick = (e) => {
		if (e.index === 0) {

			const json = uni.getStorageSync("loginUser");
			if (json) {
				const userObject = JSON.parse(json);
				uni.request({
					url: 'http://localhost:3000/carts',
					method: 'post',
					data: {
						goods: curGoods.value,
						count: 1,
						size: curGuiGe.value,
						actualPrice: tempPrice.value,
						remark: "冰",
						memberId: userObject.id

					},
					success(res) {
						uni.showToast({
							title: '已经加入购物车',
							duration: 2000
						})
					}
				})




			} else {
				uni.showToast({
					title: '下单前，请登录',
					duration: 2000
				})

			}






		}


	}
</script>

<style scoped>
	.image-area {
		display: flex;
		justify-content: center;
	}


	.image-area image {
		width: 400rpx;


	}

	.title-area {
		text-align: center;
		font-weight: bold;
		margin-top: 50rpx;
		font-size: 1rem;
	}

	.price-area {

		text-align: center;
		font-weight: bold;
		margin-top: 50rpx;
		font-size: 1.2rem;
		color: firebrick;
	}

	.btn-area {
		display: flex;
		border-top: 1px solid ghostwhite;
		border-bottom: 1px solid ghostwhite;
		height: 100rpx;
		align-items: center;
		margin-top: 50rpx;
	}

	.btn-area button {
		width: 150rpx;
		height: 60rpx;
		font-size: 0.8rem;

	}

	.active {

		background-color: lightblue;
		color: white;
		font-weight: bold;

	}
</style>